<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js"></script>
    <!-- 下面的例子把 css(), slideUp(), and slideDown() 链接在一起。-->
    <!-- "p1" 元素首先会变为红色，然后向上滑动，然后向下滑动：-->
    <script>
        $(document).ready(function () {
            $("button").click(function () {
                $("#p1").css("color", "red").slideUp(2000).slideDown(2000);
            });
        });
    </script>

</head>
<body>
<p id="p1">字体变红，上滑，下滑</p>
<button>点击这里</button>
</body>
</html>